<template>
  <view class="demo-container">
    <view class="title">Mitt 事件总线示例</view>
    <button @click="sendMessage">发送消息</button>
    <view class="message">{{ receivedMessage }}</view>
  </view>
</template>

<script>
// 导入eventBus
import eventBus from '@/utils/eventBus'

export default {
  data() {
    return {
      receivedMessage: '等待消息...'
    }
  },
  mounted() {
    // 监听事件
    this.eventHandler = (message) => {
      this.receivedMessage = message
    }
    eventBus.on('message', this.eventHandler)
  },
  beforeUnmount() {
    // 移除监听
    eventBus.off('message', this.eventHandler)
  },
  methods: {
    sendMessage() {
      // 发送事件
      eventBus.emit('message', 'Hello from EventBus!')
    }
  }
}
</script>

<style scoped>
.demo-container {
  padding: 20px;
}
.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}
button {
  padding: 10px 20px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
  margin-bottom: 20px;
}
.message {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
}
</style>